<script setup>
import SettingTitle from './components/SettingTitle.vue'
import { useTopicJoinVerifyListQuery } from '@/composables/useTopicDataQuery'
import { useRoute } from 'vue-router'
import LfTabs from '@/components/commonUI/LfTabs.vue'
import LfButton from '@/components/commonUI/LfButton.vue'
import UserAvatar from '@/components/UserAvatar/UserAvatar.vue'
import { fetchTopicJoinVerifyAgree, fetchTopicJoinVerifyReject } from '@/axios/api/topic'
import { useTopicJoinVerifyQuery } from '@/composables/useTopicDataQuery'
const route = useRoute()
const activeIndex = ref(0)

const { data, refetch, fetchNextPage, hasNextPage, isFetching, isLoading } = useTopicJoinVerifyListQuery(
  route.params.topicId,
  activeIndex,
)

const { data: topicJoinVerifyData , refetch: refetchTopicJoinVerifyData } = useTopicJoinVerifyQuery(route.params.topicId)

const topicList = computed(() => [
  { id: 1, name: '待审核', badge: topicJoinVerifyData.value?.result || 0 },
  { id: 2, name: '已通过' },
  { id: 3, name: '已拒绝' },
])

const changeSubmitType = (index) => {
  activeIndex.value = index
}

const handlePass = async (id) => {
  await fetchTopicJoinVerifyAgree({ id })
  refetch()
  refetchTopicJoinVerifyData()
}

const handleReject = async (id) => {
  await fetchTopicJoinVerifyReject({ id })
  refetch()
  refetchTopicJoinVerifyData()
}

const loadMore = () => {
  if (isFetching.value) return
  fetchNextPage()
}
</script>

<template>
  <div
    v-infinite-scroll="loadMore"
    :infinite-scroll-disabled="isFetching || !hasNextPage"
    :infinite-scroll-distance="5"
    class="h-full overflow-auto">
    <SettingTitle title="加入主题版块验证" />

    <LfTabs size="sm" :activeIndex="activeIndex" :tabOptions="topicList" :onTopicClick="changeSubmitType" />

    <div v-if="data" class="flex gap-4 flex-wrap mt-4">
      <template v-for="(page, index) in data?.pages" :key="index">
        <div
          v-for="item in page.result.data"
          :key="item.id"
          class="border-1 border-[--line-1] rounded-md p-2 flex justify-between items-center w-full">
          <div class="flex flex-col gap-1">
            <div class="flex items-center gap-2">
              <UserAvatar size="24" :avatar="item.userInfo.avatar" :userId="item.userInfo.uid" />
              <div class="text-sm font-medium">{{ item.userInfo.username }}</div>
            </div>
            <div>{{ item.answer }}</div>

            <div class="text-sm text-gray-500">{{ item.createTime }}</div>
          </div>

          <div v-if="activeIndex === 0" class="flex gap-2 flex-shrink-0">
            <LfButton type="primary" @click="handlePass(item.id)">同意</LfButton>
            <LfButton type="danger" @click="handleReject(item.id)">拒绝</LfButton>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
